<!--
 * @Author: liubei
 * @Date: 2022-03-10 10:19:44
 * @LastEditTime: 2022-03-11 17:49:01
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <style>
        .game {
            display: flex;
            align-items: stretch;
            justify-content: center;
            flex-wrap: wrap;
            width: 100px;
            height: 100px;
        }

        .square {
            flex: 0 0 33.333%;
            height: 33.33px;
            border: 1px solid gray;
            box-sizing: border-box;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app"></div>

    <script type="text/babel">
        const useState = React.useState

        function check(arr) {
            const winArr = [
                [1, 1, 1, 0, 0, 0, 0, 0, 0],
                [0, 0, 0, 1, 1, 1, 0, 0, 0],
                [0, 0, 0, 0, 0, 0, 1, 1, 1],
                [1, 0, 0, 1, 0, 0, 1, 0, 0],
                [0, 1, 0, 0, 1, 0, 0, 1, 0],
                [0, 0, 1, 0, 0, 1, 0, 0, 1],
                [1, 0, 0, 0, 1, 0, 0, 0, 1],
                [0, 0, 1, 0, 1, 0, 1, 0, 0],
            ]

            const xArr = arr.map(b => b == -1 ? 1 : 0)
            const oArr = arr.map(b => b == 1 ? 1 : 0)

            for (let i = 0; i < winArr.length; i++) {
                const winItem = winArr[i]
                let xWin = true
                let oWin = true

                for (let j = 0; j < winItem.length; j++) {
                    if (winItem[j] && winItem[j] != xArr[j]) xWin = false
                    if (winItem[j] && winItem[j] != oArr[j]) oWin = false
                }

                if (xWin) return -1
                if (oWin) return 1
            }

            return 0
        }

        function Square ({ board, onClick }) {
            return (<div className="square" onClick={onClick}>{ board == -1 ? 'X' : board == 1 ? 'O' : '' }</div>)
        }

        function Game () {
            const [role, setRole] = useState(1)
            const [winRole, setWinRole] = useState(0)
            const [gameBoard, setGameBoard] = useState(Array(9).fill(0))
            const [historyBoard, setHistoryBoard] = useState([])

            function handleClick(i) {
                console.log('handleClick')

                if (gameBoard[i] != 0) return
                if (winRole != 0) return

                const newBoard = [...gameBoard]

                newBoard[i] = role

                console.log(newBoard)
                setGameBoard(newBoard)
                setRole(role == -1 ? 1 : -1)
                setWinRole(check(newBoard))
                setHistoryBoard([...historyBoard, {b: newBoard, r: role == -1 ? 1 : -1}])
            }

            function resetBoard({b, r}, i) {
                setRole(r)
                setGameBoard(b)
                setWinRole(check(b))

                setHistoryBoard(historyBoard.slice(0, i + 1))
            }

            return (
                <div>
                    <div className="game">
                        {gameBoard.map((board, i) => <Square key={i} board={board} onClick={() => handleClick(i)} />)}
                    </div>
                    <div>winer: {winRole}</div>
                    <div>history: {historyBoard.map((h, i) => <div key={h.b} onClick={() => resetBoard(h, i)}>{h.b}</div>)}</div>
                </div>
            )
        }

        ReactDOM.render(<Game />, document.querySelector('#app'))
    </script>
</body>

</html>